{# Stalker Pyramid a Web Base Production Asset Management System
 Copyright (C) 2009-2014 Erkan Ozgur Yilmaz

 This file is part of Stalker Pyramid.

 This library is free software; you can redistribute it and/or
 modify it under the terms of the GNU Lesser General Public
 License as published by the Free Software Foundation;
 version 2.1 of the License.

 This library is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 Lesser General Public License for more details.

 You should have received a copy of the GNU Lesser General Public
 License along with this library; if not, write to the Free Software
 Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
#}
{% extends "base.jinja2" %}

{# SIDEBAR #}
{% block sidebar %}

    {% include 'sidebar.jinja2' %}

{% endblock sidebar %}

{# BREADCRUMBS #}
{% block breadcrumbs %}

    {% set page_title='Assets' %}
    {% include 'breadcrumb/breadcrumbs.jinja2' %}

{% endblock breadcrumbs %}

{# PAGE-CONTENT #}
{% block page_content %}

    {% set page_title='Assets' %}
    {% include 'page_header.jinja2' %}

    {% if has_permission('Create_Asset') %}
        <div class="row-fluid">
            <div class="btn-toolbar">
                <div class="btn-group">
                    <button class="btn btn-small btn-success"
                       data-target="#dialog_template"
                       data-toggle="modal"
                       data-keyboard=false
                       href='{{ request.route_url("create_asset_dialog", id=-1, _query={'project_id': entity.id }) }}'>
                        <i class="icon-edit bigger-120"></i>
                        Create
                    </button>
                </div>
            </div>
        </div>
        {#        <div class="space-10"></div>#}
    {% endif %}
    <div id="loading_spinner" class="well well-sm">

        <div class="inline middle blue bigger-110"><i
                class="icon-spinner icon-spin orange bigger-125"></i> Loading
            content...
        </div>
    </div>


    <div id='tabs' class="row-fluid hide">
        <div class="span12">
            <div class="tabbable" id="asset_types">
                <ul id="asset_types_ul" class="nav nav-tabs"></ul>
                <div id="asset_type_tables"
                     class="tab-content no-padding"></div>
            </div>
        </div>
    </div>

    <div id="no-data" class="alert alert-warning hide">
        <strong>Warning!</strong>
        No data available in table
        <br>
    </div>

{% endblock page_content %}

{# EXTRA-SCRIPTS #}
{% block extrascripts %}
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/jquery.dataTables.min.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/jquery.dataTables.bootstrap.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/stalker/js/dataTable_num-html_sort.js") }}'></script>

    {% raw %}
    <script id="tmpl_assetTypeLink" type="text/x-dot-template">
        <li class="">
            <a href="#{{=it.type_id }}" data-toggle="tab">{{=it.type_name}}</a>
        </li>
    </script>
    {% endraw %}

    {% raw %}
    <script id="tmpl_assetTypeTable" type="text/x-dot-template">

        <div class="tab-pane fade"
             id="{{=it.type_id}}">
            <table id="{{=it.type_id }}_table"
                   class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>Thumbnail</th>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Type</th>
                    <th>Completed</th>
                    <th>Status</th>
                    <th>Created By</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </script>
    {% endraw %}

    {% raw %}
    <script id="tmpl_assetRow" type="text/x-dot-template">
        <tr>
            <td><img style='width:auto; height: 100px;'
                     class="img-thumbnail"
                     src="{{=it.thumbnail_full_path }}">
            </td>
            <td><a href='{{=it.link}}'>{{=it.name}}</a></td>
            <td>{{=it.description}}</td>
            <td>{{=it.type_name}}</td>
            <td>
                <div class="progress progress-success">
                    <div style="width:{{=it.percent_complete}}%" class="bar">
                        <span>{{= it.percent_complete.toFixed(0) }}%</span>
                    </div>
                </div>
            </td>
            <td>
                <span class="label label-{{=it.status_color}}">{{=it.status}}</span>
            </td>

            <td><a href='/users/{{=it.created_by_id}}/view'>{{=it.created_by_name}}</a>
            </td>
        </tr>
    </script>
    {% endraw %}



    <script>
        // fill assets table with dynamic data

        $.getJSON('/projects/{{ entity.id }}/assets/').then(function (data) {
            if (data.length > 0) {
                var assets = data;
                var asset_template = doT.template($('#tmpl_assetRow').html());

                var asset_types_li_template = doT.template($('#tmpl_assetTypeLink').html());
                var asset_types_table_template = doT.template($('#tmpl_assetTypeTable').html());

                var asset_types_ul = $('#asset_types').find('ul');
                var asset_type_tables = $('#asset_type_tables');

                // wait until document is ready
                $(function () {
                    var i;
                    var table_body;
                    var table_names = [];
                    for (i = 0; i < data.length; i++) {
                        // fix dates

{#                        console.log(data[i].name + ' : ' + data[i].percent_complete);#}
                        data[i].link = '/assets/' + data[i].id + '/view';

                        if (data[i].thumbnail_full_path == null) {
                            data[i].thumbnail_full_path = '{{ request.static_url("stalker_pyramid:static/stalker/images/T_NO_IMAGE.gif") }}';
                        }
                        else {
                            data[i].thumbnail_full_path = '/' + data[i].thumbnail_full_path;
                        }

                        // create table if it does not exist
                        if ($('#' + data[i].type_id).length == 0) {
                            data[i].class = i == 0 ? 'active' : '';
                            table_names.push('#' + data[i].type_id);

                            asset_types_ul.append(asset_types_li_template(data[i]));
                            asset_type_tables.append(asset_types_table_template(data[i]));
                        }

                        // append it to the table
                        table_body = $('#' + data[i].type_id + '_table>tbody');
                        table_body.append(asset_template(data[i]));
                    }

                    for (j = 0; j < table_names.length; j++) {
                        $(table_names[j] + '_table').dataTable();
                    }

                    $('#tabs').show();
                    $("ul.nav-tabs li:first").addClass("active").show(); //Activate first tab
                    $(".tab-pane:first").addClass("in active").show(); //Show first tab content
                });

            } else {
                $('#no-data').show();

            }
            $('#loading_spinner').hide();

        });


    </script>


{% endblock extrascripts %}
